import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button, Icon } from 'react-native-tengits-elements';
import _ from 'lodash';
import { Colors, FontSize } from '../../common/Theme/TTheme';
import { scaleSize } from '../../common/Utils/ToolUtils';
import { CircuitItem, } from './SubItemComponent';

export const OverlaySegmentAdjust = (props) => {
  const [segment, setSegment] = useState(props.data);
  const [light, setLight] = useState(props.data.brightness);
  const{sliderCallback, sliderCompleteCallback} = props;
  return (
    <View style={{flex:1, flexDirection:'column', backgroundColor:Colors.white}}>
            <View style={styles.header}>
                <Text style={{fontSize:FontSize.h3_font, color: Colors.white}}>{"分段调光"}</Text>
                <Button 
                    containerStyle={{position:'absolute', top:0, right:0}}
                    buttonStyle={{backgroundColor:'transparent', width:scaleSize(117), height:scaleSize(88)}} 
                    icon={<Icon name='close' color={Colors.white} size={scaleSize(40)}/>}
                    onPress={()=>{
                        props.toggleOverlay && props.toggleOverlay("SegmentLight");
                }}/>
            </View>
            <View style={{flex:1, alignItems:'center', paddingVertical:scaleSize(50)}}>
                <Text style={{fontSize:FontSize.h2_font, color: Colors.text1_color}}>{`${segment?.sectionName}`}</Text>
                <View style={{flexDirection:'row', marginTop:scaleSize(50)}}>
                    <Text style={{fontSize: FontSize.h4_font, color:Colors.text2_color}}>{"洞内光强：--"}</Text>
                    <Text style={{fontSize: FontSize.h4_font, color:Colors.text2_color, marginLeft:scaleSize(80)}}>{"洞外光强：--"}</Text>
                </View>
                <CircuitItem title={"亮度"} 
                    containerStyle={{marginTop:scaleSize(50), borderColor: Colors.border_color, 
                    marginHorizontal:scaleSize(100), height:scaleSize(200)}}
                    light={light}
                    callback={(value)=>{
                        setLight(value);
                        sliderCallback && sliderCallback(segment, value);
                    }}
                    slideComplete={(value)=>{ sliderCompleteCallback && sliderCompleteCallback(segment, value)}}/>
            </View>
            <View style={{paddingVertical:scaleSize(40), flexDirection:'column'}}>
                <View style={{marginTop:scaleSize(20), flexDirection:'row', alignItems:'flex-end', justifyContent:'center'}}>
                    <Button buttonStyle={{paddingVertical:0, width:scaleSize(260), height:scaleSize(62), backgroundColor: Colors.button_cancel_color}} 
                        titleStyle={{color: Colors.text1_color, fontSize:FontSize.h4_font}}
                        title={"取消"} 
                        onPress={()=>{
                        props.toggleOverlay && props.toggleOverlay("SegmentLight");
                    }}/>
                    <Button buttonStyle={{paddingVertical:0, width:scaleSize(260), height:scaleSize(62), marginLeft:scaleSize(30), backgroundColor: Colors.button_color}}
                        titleStyle={{fontSize: FontSize.h4_font}}
                        title={"提交"} onPress={async()=>{
                        props.onSure && props.onSure("SegmentLight", {data: segment, light: light});
                    }}/>
                </View>
            </View>
        </View>
  );
};

const styles = StyleSheet.create({
    header:{
        flexDirection: 'row',
        height: scaleSize(88),
        backgroundColor: Colors.navibar_color,
        alignItems:'center',
        justifyContent:'center'
    },
});